<template>
	<view>
		<!-- 弹出层 -->
		<view class="uni-banner"  v-show="popups.bannerShow">
			<view style="justify-content:flex-end;     background: #ffffff00;">
				<view style="justify-content:flex-end; text-align:right; padding:20upx;" @tap="closeBanner">
					<text class="uni-icon uni-icon-close"></text>
				</view>
			</view>
				<!-- 登陆 -->
	<view class="internal" v-show="active == 0">
		<view class="content">
			<!-- 头部logo -->
			<view class="header">
				<img class='header_images' :src="logins" alt="">
			</view>
			<!-- 主体表单 -->
			<view class="main">
				<wInput
					v-model="users.telephone"
					type="text"
					maxlength="11"
					icons='lianxi'
					placeholder="用户名/电话"
				></wInput>
				<wInput
					v-model="users.password"
					type="password"
					maxlength="11"
					icons='mima'
					placeholder="密码"
				></wInput>
			</view>
			<wButton 
				text="登 录"
				:rotate="isRotate" 
				@click.native="Landing()"
			></wButton>
			<!-- 底部信息 -->
			<view class="footer">
				<navigator url="forget" open-type="navigate">找回密码</navigator>
				<text>|</text>
				<navigator url="register" open-type="navigate"  @tap="gotoRegistration">注册账号</navigator>
			</view>
		</view>
	</view>
	<!-- 注册 -->
			<view class="internal" v-show="active == 1">
				<view class="content">
					<!-- 主体表单 -->
					<view class="main">
						<view class="cla_text">
							用户信息
						</view>
						<wInput
							v-model="information.telephone"
							type="text"
							maxlength="11"
							placeholder="用户名/电话"
								icons='lianxi'
						></wInput>
						<wInput
							v-model="information.password"
							type="password"
							maxlength="11"
							placeholder="密码"
								icons='mima'
						></wInput>
						<view class="cla_text">
							基本信息
						</view>
						<wInput
							v-model="information.city"
							type="text"
							placeholder="请输入现居省、市、区"
							@openPicker="openPicker"
						></wInput>
						<wInput
							v-model="information.region"
							type="text"
							placeholder="请输入现居省、市、区"
							@openPicker="openPicker"
						></wInput>
						<wInput
							v-model="information.address"
							type="text"
							placeholder="请填写详细地址"
						></wInput>
						<wInput
							v-model="verCode"
							type="number"
							maxlength="4"
							placeholder="验证码"
							isShowCode
							codeText="获取验证码"
							setTime="60"
							ref="runCode"
								icons='phone'
							@setCode="getVerCode()"
						></wInput>
					</view>
				</view>
				<wButton
					text="注 册"
					:rotate="isRotate" 
					@click.native="registered()"
				></wButton>
				<view class="footer">
					<navigator url="forget" open-type="navigate">已有账号？</navigator>
					<text>|</text>
					<navigator url="register" open-type="navigate"  @tap="gotoLogin">点此登陆</navigator>
				</view>
			</view>
		</view>
		<view class="uni-mask" v-show="popups.bannerShow"></view>
		<!-- 弹出层 -->
		<lotusaddress v-on:choseVal="choseValue" :lotusAddressData="lotusAddressData"></lotusaddress>
	</view>
</template>
<script>
    //保存登陆态
    var SESSION_KEY = 'denglutai'
	import logins from'./logo.png'
	import lotusaddress from "../Winglau14-lotusAddress/Winglau14-lotusAddress.vue"
	// import logoback from'./logoback.png'
	var _this;
	import wInput from '../watch-login/watch-input.vue' //input
	import wButton from '../watch-login/watch-button.vue' //button
	
	export default {
		props:['popups'],
		components:{
			lotusaddress,
			wInput,
			wButton
		},
		data() {
			return {
				logins,
				bannerShow: true,  //
				isRotate: false, //是否加载旋转
				active:0,
				verCode:'',
		
				/************  地区 选择 ***************/
				       lotusAddressData:{
				                visible:false,
				                provinceName:'四川省',
				                cityName:'绵阳市',
				                townName:'涪城区',
				            },
				            region:'',
							/*登陆信息*/
							users:{
								telephone:'', //电话号码
								password:'',//密码
							},
						/******用户注册信息******/
						information:{
							telephone:'', //电话号码
							password:'',//密码
							city:'',//城市
							region:'',//市区
							address:'',//详细地址
							avatar:'x'//头像  省
						},
					
			}
		},
		created() {
			
		},
		onBackPress() { //app,h5 按返回键触发
	
		},
		methods: {
			getVerCode(){
				//获取验证码
				console.log("获取验证码")
				this.$refs.runCode.$emit('runCode'); //触发倒计时（一般用于请求成功验证码后调用）
				uni.showToast({
				    icon: 'none',
					position: 'bottom',
				    title: '模拟倒计时触发'
				});
				
				setTimeout(()=>{
					this.$refs.runCode.$emit('runCode',0); //假装模拟下需要 终止倒计时
					uni.showToast({
					    icon: 'none',
						position: 'bottom',
					    title: '模拟倒计时终止'
					});
				},60000)
			},
			Landing(){//登陆
			if(this.users.telephone == ''){
				uni.showToast({
				    title: '请输入电话号码',
					icon:'none',
				    duration: 2000
				});
				return false;
			}
			if(this.users.password == ''){
				uni.showToast({
				    title: '请输入密码',
					icon:'none',
				    duration: 2000
				});
				return false;
			}
				 this.$apifn.Login(this.users).then((res)=>{
				 	 if(res.data.Response.code == 200){
						 uni.setStorageSync('refresh_token', res.data.Response.data.refresh_token);
						 uni.setStorageSync('USERINFO', res.data.Response.data);
				 		 this.popups.bannerShow = false;
						 uni.showToast({
						     title: '登陆成功',
						 	  icon:'success',
						     duration: 2000
						 });
					this.$emit('userdelu',res.data.Response.data);
				 	 }
				  }).catch((ret)=>{ 
				 	  console.log(ret.data)
					  if(ret.data){
						  uni.showToast({
						      title: '账号或者密码不存在',
						  	  icon:'none',
						      duration: 2000
						  });
					  }
				 });
			},
			registered(){ //注册
			if(this.information.telephone == ''){
				uni.showToast({
				    title: '请输入电话号码',
					icon:'none',
				    duration: 2000
				});
				return false;
			}
			if(this.information.password == ''){
				uni.showToast({
				    title: '请输入密码',
					icon:'none',
				    duration: 2000
				});
				return false;
			}
			if(this.information.city == ''){
				uni.showToast({
				    title: '请输入地址',
					icon:'none',
				    duration: 2000
				});
				return false;
			}
			if(this.information.region == ''){
				uni.showToast({
				    title: '请输入地址',
					icon:'none',
				    duration: 2000
				});
				return false;
			}
		if(this.information.address == ''){
				uni.showToast({
				    title: '请输入地址',
					icon:'none',
				    duration: 2000
				});
				return false;
			}
				this.$apifn.registered(this.information).then((res)=>{
					 if(res.data.Response.code == 200){
						  uni.setStorageSync('refresh_token', res.data.Response.data.refresh_token);
						  uni.setStorageSync('USERINFO', res.data.Response.data);
						  this.popups.bannerShow = false;
							uni.showToast({
								 title: '注册成功',
								  icon:'success',
								duration: 2000
							});
						this.$emit('userdelu',res.data.Response.data);
					 }
				 }).catch((ret) => {
					 if(ret.data.errors.telephone){
						 uni.showToast({
						     title: '该账号已存在',
						 	  icon:'none',
						     duration: 2000
						 });
					 }
				})
			},
			/************  地区 选择 ***************/
			openPicker() {
			         this.lotusAddressData.visible = true;
					 console.log(1)
			     },
			     choseValue(res){  //地区选择
			         this.lotusAddressData.visible = res.visible;//visible为显示与关闭组件标识true显示false隐藏
			         if(res.isChose){
										// this.information.avatar = res.provice//省
										this.information.city = `${res.provice}-${res.city}`;//市
										this.information.region = res.town;      //区
			
			         }
			     },
			gotoRegistration() { //注册账号
				this.active = 1;
			},
			gotoLogin(){  //登陆
			this.active = 0;
			},
		
			closeBanner() {  //关闭弹出框
			this.$emit('giveadvice',this.popups);
			this.popups.bannerShow = false;
			},
	
		},
		onReady() { //替代 mounted 监听页面初次渲染完成
		},
			watch: {
		
			},
	}
</script>

<style  lang="scss" scoped>
	
	@import url("../watch-login/css/icon.css");
	@import url("./css/main.css");
	.cla_text {
		width: 86%;
		height: 50upx;
		line-height: 50upx;
		color: #464c5b;
		font-size: 14px;
		margin: auto;
		// background: #F4F5F6;
	}
	/* 登陆 */
	.internal{
		// padding: 20upx 90upx 20upx 90upx;
	}
	$color-primary: #1984d2;

	.logo{
	    text-align: center;
		image{
		    height: 200upx;
		    width: 200upx;
		    margin: 0 0 60upx;
		}
	}
	.uni-form-item{
		margin-bottom: 40upx;
		// padding: 0;
		border-bottom: 1px solid #e3e3e3;
		.uni-input{
			font-size: 30upx;
			padding:0 7px;
		}
	}
	button[type="primary"]{
		background-color: $color-primary;
		border-radius: 0;
		font-size: 34upx;
		margin-top: 60upx;
	}
	.links{
		text-align: center;
		margin-top: 40upx;
		font-size: 26upx;
		color: #999;
		view{
			display: inline-block;
			vertical-align: top;
			margin: 0 10upx;
		}
		.link-highlight{
			color: $color-primary
		}
	}
	
	/* 遮罩层 */
	.uni-mask {
		background: rgba(0, 0, 0, 0.6);
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		z-index: 997;
	}

	/* 弹出层形式的广告 */
	.uni-banner {
		width: 100%;
		height: 100%;
		position: fixed;
		left: 50%;
		top: 50%;
		// background-image: url('./logoback.jpg');
		background-size: 100% 100%;
		background: #FFF;
		border-radius: 10upx;
		z-index: 998;
		transform: translate(-50%, -50%);
	}
</style>
